<template>
  <view class="wrapper">
    <swiper class="swiper" autoplay circular>
      <swiper-item v-for="(item, index) in noticeList" :key="index">
        <navigator class="swiper-item" :url="`/pages/notice/index?id=${item.id}`">
          <img class="cover" src="/static/home/swiper.jpg" mode="aspectFill" />
        </navigator>
      </swiper-item>
    </swiper>

    <view class="link-wrapper">
      <view class="left">
        <navigator class="item" url="/pages/chutu/index">我要出土</navigator>
        <navigator class="item" url="/pages/report/index">我要上报</navigator>
      </view>
      <navigator class="right" url="/pages/mine/index">个人通道</navigator>
    </view>

    <view class="tab-wrapper">
      <view
        v-for="(item, index) in tabList"
        :key="index"
        :class="['item', index === tabIndex ? 'active' : '']"
        @click="tabIndex = index"
      >
        {{ item }}
      </view>
    </view>

    <view class="report-list" v-if="tabIndex === 0">
      <view class="report-item" v-for="(item, index) in decorationList" :key="index">
        <view>出土人姓名：{{ item.name || '--' }}</view>
        <view>出土原因：{{ item.reason || '--' }}</view>
        <view>清运时间：{{ item.time || '--' }}</view>
        <view>出土方量：{{ item.soilNum || '--' }}</view>
        <view @click="handleOpenAddress(item, 'chutu')">
          出土位置： <text :class="{ address: item.gis }">{{ item.address || '--' }}</text>
        </view>
      </view>
    </view>

    <view class="report-list" v-if="tabIndex === 1">
      <view class="report-item" v-for="(item, index) in reportList" :key="index">
        <view :class="['status', getStatusColor(item.status)]">{{ item.status }}</view>
        <view>问题类型：{{ item.ftypename || '--' }}</view>
        <view>问题大类：{{ item.flargename || '--' }}</view>
        <view>问题小类：{{ item.fsmallname || '--' }}</view>
        <view>事发时间：{{ item.fcomplaintime || '--' }}</view>
        <view>上报人：{{ item.fcomplainid || '--' }}</view>
        <view @click="handleOpenAddress(item)">
          问题位置：
          <text :class="{ address: item.flatitude && item.flongitude }">
            {{ item.faddr || '--' }}
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getHistoryList, listNotice, listDecoration } from '@/api';
export default {
  data() {
    return {
      tabIndex: 0,
      tabList: ['出土', '上报'],
      noticeList: [], // 通知公告列表
      reportList: [], // 上报列表
      decorationList: [], // 出土列表
    };
  },

  created() {
    this.init();
  },

  methods: {
    init() {
      this.getNoticeList();
      this.getHistoryList();
      this.getDeclareList();
    },

    getNoticeList() {
      const params = {
        pageNum: 1,
        pageSize: 10,
      };
      listNotice(params).then((res) => {
        this.noticeList = res.rows || [];
      });
    },

    getDeclareList() {
      listDecoration().then((res) => {
        this.decorationList = res.rows || [];
      });
    },

    getHistoryList() {
      const params = {
        start: 1,
        end: 99,
      };
      getHistoryList(params).then((res) => {
        this.reportList = res.data || [];
      });
    },

    getStatusColor(status) {
      let background = '';
      switch (status) {
        case '未受理':
          background = 'fail';
          break;
        case '处理中':
          background = 'wait';
          break;
        case '已结案':
          background = 'success';
          break;
        default:
          background = 'fail';
          break;
      }
      return background;
    },

    handleOpenAddress(item, type) {
      if (type === 'chutu') {
        const [longitude, latitude] = item.gis.split(',');
        uni.openLocation({
          latitude: Number(latitude),
          longitude: Number(longitude),
          address: item.address,
        });
      } else {
        if (item.flatitude && item.flongitude) {
          uni.openLocation({
            latitude: Number(item.flatitude),
            longitude: Number(item.flongitude),
            address: item.faddr,
          });
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import '@/uni.less';
.wrapper {
  background: #f8f8f8;
  min-height: 100vh;
  .swiper {
    width: 100%;
    height: 350rpx;
    .swiper-item {
      height: 100%;
      .cover {
        width: 100%;
        height: 100%;
      }
    }
  }

  .link-wrapper {
    margin-top: 24rpx;
    padding: 0 32rpx;
    display: flex;
    .left {
      flex: 1;
      display: flex;
      flex-direction: column;
      .item {
        flex: 1;
        background: #fff;
        border-radius: 16rpx;
        box-shadow: 0 0 20rpx 4rpx #f1f1f1;
        font-size: 32rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        &:last-child {
          margin-top: 20rpx;
        }
      }
    }
    .right {
      flex: 1;
      margin-left: 20rpx;
      height: 220rpx;
      background: #fff;
      border-radius: 16rpx;
      box-shadow: 0 0 20rpx 4rpx #f1f1f1;
      font-size: 32rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .tab-wrapper {
    position: sticky;
    top: 0;
    z-index: 1;
    margin-top: 32rpx;
    display: flex;
    padding: 0 32rpx;
    height: 92rpx;
    background: #fff;
    box-shadow: 0 0 20rpx 4rpx #f1f1f1;
    .item {
      flex: 1;
      border-radius: 16rpx;
      font-size: 32rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      &:last-child {
        margin-left: 20rpx;
      }
      &.active {
        position: relative;
        color: @uni-color-primary;
        &::after {
          position: absolute;
          content: '';
          left: 50%;
          bottom: 0;
          transform: translateX(-50%);
          width: 40%;
          height: 4rpx;
          background-color: @uni-color-primary;
        }
      }
    }
  }

  .report-list {
    .report-item {
      position: relative;
      margin: 24rpx;
      padding: 32rpx;
      background: #fff;
      border-radius: 16rpx;
      box-shadow: 0 0 20rpx 4rpx #f1f1f1;
      line-height: 48rpx;
      .status {
        position: absolute;
        right: 0;
        top: 0;
        padding: 6rpx 20rpx;
        border-radius: 0 16rpx 0 16rpx;
        font-size: 24rpx;
        background: #eee;
        &.success {
          background: @uni-color-success;
          color: #fff;
        }
        &.fail {
          background: @uni-color-warning;
          color: #fff;
        }
        &.wait {
          background: @uni-color-primary;
          color: #fff;
        }
      }
      .address {
        text-decoration: underline;
        color: @uni-color-primary;
      }
    }
  }
}
</style>
